<template>
  <div class="cpn" v-loading="loading">
    <div class="block" style="user-select: none;" v-show="!loading">
      <el-carousel class="carousel">
        <el-carousel-item class="item" v-for="(item, index) in mealList" :key="index">
          <div>
            <img :src="item[0].picture" alt="">
            <h3>{{item[0].mname}}</h3>
          </div>
          <div>
            <img :src="item[1].picture" alt="">
            <h3>{{item[1].mname}}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="chart" v-show="!loading">
      <div>
        <p>热门餐品</p>
      </div>
      <div>
        <p>今日通知</p>
        <div class="table">
          <el-table
            id="notice"
            border
            height="200px"
            :cell-style="{borderColor:'rgba(64,158,255,0.7)'}"
            :header-row-style="{height: '10px'}"
            :header-cell-style="{borderColor:'rgba(64,158,255,0.7)'}"
            :data="orderList"
            :row-class-name="tableRowClassName"
            style="width: 100%">
            <!--序号列-->
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="85"
              :index="indexMethod">
            </el-table-column>
            <el-table-column
              prop="orderno"
              align="center"
              label="订单编号"
              width="130">
            </el-table-column>
            <el-table-column
              prop="remark"
              align="center"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="operate"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button size="mini" class="el-button--primary" @click="jumpTo(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Welcome",
        data() {
            return {
                mealList: [],
                orderList: [],
                loading: true,
                url: {
                    orderList: "getOrderPyPage"
                },
                permission: this.$store.state.permission
            }
        },
        methods: {
            /**
             * 生成序号
             */
            indexMethod(index) {
                return index + 1;
            },
            getMealList() {
                this.$http.get("getAllMeal").then(res => {
                    this.mealList = res.data.slice(0, 10).reduce((pre, item, index) => {
                        const ind = Math.floor(index / 2)
                        if (index % 2 === 0) {
                            pre[ind] = []
                        }
                        pre[ind].push(item)
                        this.loading = false
                        return pre
                    }, [])
                }).catch(() => {
                    this.$message.error("服务器错误")
                })
            },
            getOrderList() {
                const param = {
                    orderno: "",
                    page: 1,
                    limit: 6
                }
                let remark = null

                if (this.permission === 1) {
                    param.empno = sessionStorage.getItem("empno")
                    param.statu = 4
                    remark = "已通过"
                } else if (this.permission === 2) {
                    param.deptno = sessionStorage.getItem("deptno")
                    param.statu = 2
                    remark = "待审核"
                } else {
                    param.statu = 3
                    remark = "待审核"
                }

                this.$http.post(this.url.orderList, param).then(res => {
                    const data = res.data.data
                    data && data.map(item => {
                        item.remark = remark
                        return item
                    })
                    this.orderList = data
                }).catch(() => {
                    this.$message.error("服务器错误")
                })
            },
            // 表格隔行变色
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex % 2 === 0) {
                    return 'success-row'
                }
            },
            //查看订单
            jumpTo(data) {
                sessionStorage.setItem("orderno", data.orderno)
                if (data.remark === "待审核") {
                    this.$parent.$parent.$parent.$parent.toOrderCommit()
                } else {
                    this.$parent.$parent.$parent.$parent.toPersonalList()
                }
            }
        },
        created() {
            this.getMealList()
            this.getOrderList()
        }
    }
</script>

<style scoped>
  .cpn {
    width: 1195px;
    height: 600px;
    background-color: white;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .cpn > * {
    height: 280px;
  }
  .chart {
    background-color: rgb(234,237,241);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .chart>div {
    width: 47%;
    height: 90%;
    background-color: white;
  }
  .chart>div>p {
    margin: 0  15px;
    padding: 10px 0 0 0;
    color: #409EFF;
    font-weight: bold;
    border-bottom: 3px solid rgba(64,158,255,0.7);
  }
  .carousel {
    margin: 0 auto;
    height: 100%;
  }
  .carousel .item {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
  }
  .carousel .item div {
    width: 47%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .carousel img {
    width: 100%;
    height: 240px;
  }
  .el-carousel__item h3 {
    color: #409EFF;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: rgb(234,237,241);
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: rgb(234,237,241);
  }
  .table {
    margin: 10px 15px;
  }
</style>